<template>
  <div>
    <ul class="item">
      <li v-for="(item,i) in list" :key="i" class="item-title border-bottom">
        <span class="mp-ticketype-ticket"></span>
        <span>{{ item.title }}</span>
        <div class="item.children" v-if="item.children">
           <DetailList :list="item.children"></DetailList>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "DetailList",
  props: ["list"]
};
</script>
<style lang="stylus" scoped>
.item-title {
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;

  .mp-ticketype-ticket {
    display: inline-block;
    position: relative;
    width: 0.36rem;
    height: 0.36rem;
    top: 0.06rem;
    left: 0.1rem;
    background: url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem no-repeat;
    margin-right: 0.1rem;
    background-size: 0.4rem 3rem;
  }
}
</style>